<template>
  <div class="app-container box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <el-col :span="24" class="form">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-input v-model="formInline.title" placeholder="请输入标题"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitTitle" icon="el-icon-search">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="24" class="content">
            <ul>
              <li class="list-item" v-for="(item,index) in tableData.slice((pages.pageNum-1)*pages.pageSize,pages.pageNum*pages.pageSize)" :key="index">
                <div class="list-item-meta">
                  <div class="list-item-meta-avatar">
                    <el-image
                      style="width: 61px;height: 61px;"
                      src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                      fit="cover"></el-image>
                  </div>
                  <div class="list-item-meta-content">
                    <div class="list-item-meta-title">{{item.title}}</div>
                    <div class="list-item-meta-description">{{item.name}}</div>
                  </div>
                  <div class="list-item-meta-content">
                    <div class="list-item-meta-item">
                      <span>时间</span>
                      <p>{{item.date}}</p>
                    </div>
                  </div>
                  <div class="list-item-meta-content">
                    <el-progress :percentage="item.rate"></el-progress>
                  </div>
                </div>
              </li>
            </ul>
            <Pagination :total="total" :pageNum.sync="pages.pageNum"
                        :limit.sync="pages.pageSize"
                        :pageSizes="pageSizes"
            ></Pagination>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import Pagination from '@/components/Pagination/Pagination'
export default {
  name: 'list',
  components:{Pagination},
  data() {
    return {
      total: 0,
      formInline: {
        title: ''
      },
      pages: {
        pageNum: 1,
        pageSize: 10
      },
      pageSizes: [10, 20, 30, 40, 50, 100],
      tableData: [],
      dataList: []
    }
  },
  methods: {
    onSubmitTitle() {
      let list = []
      this.tableData = this.dataList
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].title.indexOf(this.formInline.title) >= 0) {
          list.push(this.tableData[i])
        }
      }
      this.tableData = list
      this.total = this.tableData.length
    },
    fetchData() {
      this.loading = true
      axios.get('http://route.showapi.com/80-27').then(res => {
        this.tableData = res.data._data.data.rows
        this.dataList = res.data._data.data.rows
        this.total = res.data._data.data.total
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">
.box {
  padding-bottom: 70px;
  .form {
    ::v-deep.el-input {
      width: 200px;
    }
  }
  .content{
    padding-bottom: 20px;
    ul{
      padding: 0 15px;
      margin: 0;
      list-style: none;
      .list-item{
        padding: 20px 0;
        border-bottom: 1px solid #dcdfe6;
        .list-item-meta{
          display: flex;
          flex: 1 1;
          align-items: flex-start;
          .list-item-meta-avatar{
            margin-right: 16px;
          }
          .list-item-meta-content{
            flex: 1 0;
            width: 0;
            color: rgba(0,0,0,.85);
            .el-progress{
              margin-top: 21px;
            }
            .list-item-meta-title{
              margin-top: 11px;
              margin-bottom: 4px;
              font-size: 14px;
              color: rgba(0,0,0,.85);
            }
            .list-item-meta-description{
              font-size: 14px;
              color: rgba(0,0,0,.45);
            }
            .list-item-meta-item{
              display: inline-block;
              height: 61px;
              margin-left: 40px;
              font-size: 14px;
              color: rgba(0,0,0,.45);
              vertical-align: middle;
              span{
                line-height: 30px;
              }
              p{
                margin-top: 4px;
                margin-bottom: 0;
              }
            }
          }
        }

      }
    }
  }
}
</style>
